<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的评论</title>
    <%- include bootstrap %>
</head>

<body>
    <%- include("header",{title:"my_commemts"}) %>

    <div class="comments_content">
        <div class="container container-fluid">
            <div class="row" style="margin-top: 30px;">
                <div class="col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1">
                    <div class="row">
                        <h2>我的评论</h2>
                    </div>
                    <div class="row" style="margin-top: 40px;">
                        <div class="col-sm-5 col-xs-5">
                            <button class="btn btn-primary" onclick='sort(1)'>时间升序</button>
                            <button class="btn btn-warning" onclick='sort(-1)'>时间降序</button>
                        </div>
                        <div class="form-group cl col-sm-7 col-xs-7">
                            <div class="col-sm-10 col-xs-10">
                                <input type="text" class="form-control search" placeholder="搜索">
                            </div>
                            <button class="btn btn-primary col-sm-2 col-xs-2 search_btn" onclick="search()">搜索</button>
                        </div>
                    </div>
                    <div class="row">
                        <ul class="list-group col-sm-12 col-xs-12" style="padding-right: 0;margin-top: 10px;">
                            <% if(comments_result.length !== 0){ %>
                            <% comments_result.map((item)=>{ %>
                            <li class="list-group-item list-group-item-success cl">
                                <div>
                                    <p class="text-danger h4">
                                        话题：
                                        <%- item.title %>
                                    </p>
                                </div>
                                <div>
                                    <span class="text-danger h4">
                                        评论人：
                                        <%- item.username %>
                                    </span>
                                </div>
                                <div style="margin-top: 10px;font-size: 16px;">
                                    <h4>评论内容：</h4>
                                    <div class="text-warning h3"><%- item.content %></div>
                                </div>
                                <div><span class="text-info">
                                        评论时间：
                                        <%- item.insert_time %>
                                    </span>
                                </div>
                                <div class="pull-right">
                                    <button class="btn btn-danger" data-toggle="modal" data-target="#remove_modal"
                                        onclick='setId("<%- item._id %>")'>删除</button>
                                    <button class="btn btn-info" data-toggle="modal" data-target="#update_modal"
                                        onclick='setData(this,"<%- item._id %>")'>修改</button>
                                </div>
                            </li>
                            <% }); %>
                            <li class="list-group-item list-group-item-info">
                                <nav aria-label="Page navigation" class="cl" style="text-align: center">
                                    <div style="display: inline-block">
                                        <ul class="pagination">
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- pageNo>1 ? pageNo-1:1 %>"
                                                    aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                            <%    if(pageNo===(totalPage-1)&&totalPage>=5){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- totalPage-4 %>">
                                                    <%- totalPage-4 %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo===totalPage&&totalPage>=5){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- totalPage-4 %>">
                                                    <%- totalPage-4 %>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- totalPage-3 %>">
                                                    <%- totalPage-3 %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo===totalPage&&totalPage===4){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- totalPage-3 %>">
                                                    <%- totalPage-3 %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo>2){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- pageNo -2 %>">
                                                    <%- pageNo-2 %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo>1){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- pageNo-1 %>">
                                                    <%- pageNo-1 %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <li class="active">
                                                <a href="/comments/my_comments?pageNo=<%- pageNo %>">
                                                    <%- pageNo %>
                                                </a>
                                            </li>
                                            <%    if(pageNo<=totalPage-1){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- pageNo+1 %>">
                                                    <%- pageNo+1 %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo<=totalPage-2){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- pageNo+2 %>">
                                                    <%- pageNo +2  %>
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo===1&&totalPage===4){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=4">
                                                    4
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo===1&&totalPage>=5){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=4">
                                                    4
                                                </a>
                                            </li>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=5">
                                                    5
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <%    if(pageNo===2&&totalPage>=5){   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=5">
                                                    5
                                                </a>
                                            </li>
                                            <%    }   %>
                                            <li>
                                                <a href="/comments/my_comments?pageNo=<%- pageNo<totalPage ? pageNo+1:totalPage %>"
                                                    aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </nav>
                            </li>
                            <li class="list-group-item list-group-item-info">
                                <p class="h4 text-danger">
                                    第
                                    <%- pageNo %> 页 / 共
                                    <%- totalPage%> 页
                                    总
                                    <%- count %> 条
                                </p>
                            </li>
                            <li class="list-group-item list-group-item-warning cl">
                                <button class="btn btn-danger center-block" data-toggle="modal" data-target="#remove_modal"
                                    onclick='setId("-1")'>全部删除</button>
                            </li>
                            <% }else{ %>
                            <li class="list-group-item list-group-item-danger h3">
                                暂无评论
                            </li>
                            <% } %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="remove_modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p class="text-danger">是否删除该评论？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="remove()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="update_modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="content_input_id" class="text-warning">评论内容：</label>
                        <textarea name="content" class="form-control" id="content_input_id" rows="10" placeholder="评论内容"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="update()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <%- include("footer") %>
</body>

<script>
    function setId(id) {
        setCookie("remove_id", id);
    }
    function remove() {
        location.href = `/comments/remove`;
    }
    function setData(obj, id) {
        var content = $(obj).parent().prev().prev().children().last().html();
        setCookie("update_id", id);
        $("#content_input_id").val(content);
    }
    function update() {
        content = $("#content_input_id").val();
        setCookie("update_content", content);
        location.href = `/comments/update`;
    }

    function sort(attr) {
        var search_key = $(".search").val();
        setCookie("search_key", search_key);
        location.href = `/comments/my_comments?insert_time=${attr}`;
    }
    function search() {
        var search_key = $(".search").val();
        setCookie("search_key", search_key);
        location.href = `/comments/my_comments?insert_time=-1`;
    }
</script>

</html>